import { createStyles } from 'antd-style';
import { ConfigProvider, Descriptions, Flex, Image, Skeleton } from 'antd';
import { DescriptionsItemType } from 'antd/es/descriptions';
import { CloseIcon } from '@ycx/ui';
import { FC } from 'react';
import { MediaSource } from '#/entity.ts';

const useStyle = createStyles(({ css }) => {
  return {
    wrapper: css`
      border-radius: 8px;
      background: var(--ycx-card-bg-color);
      box-shadow: 0 8px 12px 0 rgba(119, 130, 153, 0.08);
      position: absolute;
      top: 24px;
      left: 352px;
      z-index: 1;
      width: 442px;
      padding: 16px 24px;
    `,
    icon: css`
      color: var(--ycx-font-color-l3);
      position: absolute;
      top: 16px;
      right: 24px;
      font-size: 24px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      transform: scale(1.25);
    `,
    carNo: css`
      display: inline-block;
      border-radius: 4px;
      border: 1px solid var(--ycx-container-bg-color);
      background: var(--ycx-primary-color);
      color: var(--ycx-font-color);

      text-align: center;

      /* 18/CN-Medium */
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: 26px; /* 144.444% */
      padding: 3px 4px;
      margin-bottom: 16px;
    `,
  };
});

type Props = {
  data: {
    carNo: string;
    items: DescriptionsItemType[];
    imgList?: MediaSource[];
  };
  onClose: () => void;
};

const InfoWindow: FC<Props> = ({ data, onClose }) => {
  const { styles } = useStyle();

  return (
    <div className={styles.wrapper}>
      <CloseIcon className={styles.icon} onClick={onClose} />
      {data.items.length ? (
        <>
          <div className={styles.carNo}>{data.carNo}</div>
          <div>
            <Image.PreviewGroup>
              <Flex gap={8} className="mb-2">
                {data.imgList &&
                  data.imgList.map((i) => {
                    return (
                      <Image
                        key={i.id}
                        width={150}
                        src={`https://oss.uconcern.com/${i.fileUrl}`}
                      ></Image>
                    );
                  })}
              </Flex>
            </Image.PreviewGroup>
          </div>
          <ConfigProvider
            theme={{
              components: {
                Descriptions: {
                  fontSize: 12,
                  colorTextTertiary: 'var(--ycx-font-color-l3)',
                },
              },
            }}
          >
            <Descriptions size="small" column={24} items={data.items} />
          </ConfigProvider>
        </>
      ) : (
        <Skeleton active />
      )}
    </div>
  );
};

export default InfoWindow;
